<template>
	<div class="admin">
		<!-- <el-card class="!border-none" shadow="never">
			<el-form class="mb-[-16px]" :model="formData" inline>
				<el-form-item label="物料名称">
					<el-input v-model="formData.title" class="w-56" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="resetPage">查询</el-button>
					<el-button @click="resetParams">重置</el-button>
				</el-form-item>
			</el-form>
		</el-card> -->
		<el-card class="!border-none" shadow="never">
			<div class="mt-4">
				<div class="flex" style="height: 350px;">
					<div class="flex-1" style="height: 350px;overflow-y: scroll;">
						<el-input v-model="filterText" placeholder="搜索分类" />
						<el-tree ref="treeRef" :data="treelist" node-key="id" :default-expand-all="false"
							:expand-on-click-node="false" :filter-node-method="filterNode" :props="defaultProps" @node-click="ontreeclick" />
					</div>
					<div class="flex-1" style="border: 1px solid rgb(231 230 230);padding: 20px;border-radius: 5px;">
						<el-form ref="formRef" :model="formData" label-width="80px" label-position="left"
							:rules="formRules">
							<!-- 账号输入框 -->
							<el-form-item label="上级id">
								<el-input v-model="formData.id" :disabled="true" placeholder="请输入账号">
								</el-input>
							</el-form-item>
							<el-form-item label="本级id">
								<el-input v-model="formData.pid" placeholder="请输入账号">
								</el-input>
							</el-form-item>
							<el-form-item label="名称">
								<el-input v-model="formData.name" placeholder="请输入账号">
								</el-input>
							</el-form-item>
							<el-form-item label="编码">
								<el-input v-model="formData.no" placeholder="请输入账号">
								</el-input>
							</el-form-item>
							<el-form-item>
								<el-button type="success" @click="append(formData)">新建</el-button>
								<el-button type="primary" @click="submit(formData)">保存</el-button>
								<el-button type="danger" @click="remove(formData)">删除</el-button>
							</el-form-item>
						</el-form>
					</div>
				</div>
			</div>
		</el-card>
	</div>
</template>

<script lang="ts" setup>
	import {
		adminLists,
		adminAdd,
		adminEdit,
		adminDelete
	} from '@/api/classification/list'
	import feedback from '@/utils/feedback'
	// 表单数据
	const formData = reactive({
		title: ''
	})
	const treeRef = ref()
	const defaultProps = {
		children: 'children',
		label: 'name',
	}
	const filterText = ref('')
	const treelist = ref([])
	watch(filterText, (val) => {
		// console.log('val',val)
		treeRef.value!.filter(val)
	})
	const formRules = reactive({
		title: [{
			required: true,
			message: '请输入计量单位',
			trigger: ['blur']
		}],
	})
	const filterNode = (value: string, data: Tree) => {
		if (!value) return true
		return data.name.includes(value)
	}
	const append = (data: Tree) => {
		// console.log('append', data)
		let datas = {
			pid: data.pid,
			name: data.name,
			no: data.no
		}
		adminAdd(datas).then((res: any) => {
			if (res.code == 1) {
				feedback.msgSuccess(res.msg)
			} else {
				
			}
		})
		// nextTick()
		setTimeout(() => {
			getRoleList()
		}, 300)

	}

	const remove = async (data: Tree) => {
		await feedback.confirm('确定要删除？')
		await adminDelete({
			id: data.id
		}).then((res: any) => {
			if (res.code == 1) {
				feedback.msgSuccess(res.msg)
			} else {
				
			}
		})
		setTimeout(() => {
			getRoleList()
		}, 300)
	}
	const submit = (data: Tree) => {
		adminEdit(data).then((res: any) => {
			if (res.code == 1) {
				feedback.msgSuccess(res.msg)
			} else {
			}
		})
		setTimeout(() => {
			getRoleList()
		}, 300)
	}
	const getRoleList = () => {
		adminLists().then((res: any) => {
			treelist.value = res
		})
	}
	const ontreeclick = (data: Tree) => {
		formData.id = data.id
		formData.name = data.name
		formData.no = data.no
		formData.pid = data.pid
	}
	onMounted(() => {
		getRoleList()
	})
</script>
<style lang="scss" scoped>
	/* 设置滚动条的样式 */
	::-webkit-scrollbar {
		width: 12px;
	}

	/* 滚动槽 */
	::-webkit-scrollbar-track {
		-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
		border-radius: 10px;
	}

	/* 滚动条滑块 */
	::-webkit-scrollbar-thumb {
		border-radius: 10px;
		background: rgba(0, 0, 0, 0.1);
		-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
	}

	::-webkit-scrollbar-thumb:window-inactive {
		background: rgba(255, 0, 0, 0.4);
	}
</style>
